<template>
  <div class="con">
    <!-- 充值提现 -->
    <div class="contbox6_10">
      <p class="titlelist6_10">
        活动管理
        <span style="color: #999;">&nbsp;&nbsp;/&nbsp;&nbsp;</span>开通达标
      </p>
      <div class="content">
        <div class="sousuojg6_10">
          <el-form
            label-width="100px"
            :model="formInline"
            class="demo-form-inline"
          >
            <el-form-item label="机构ID" v-if="jurisdiction == 2">
              <el-input
                v-model="formInline.officeUid"
                placeholder="请输入机构ID"
              ></el-input>
            </el-form-item>
            <el-form-item label="机构名称" v-if="jurisdiction == 2">
              <el-input
                v-model="formInline.officeName"
                placeholder="请输入机构名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="手机号" v-if="jurisdiction == 2">
              <el-input
                v-model="formInline.phone"
                placeholder="请输入手机号"
              ></el-input>
            </el-form-item>

            <el-form-item label="活动名称">
              <el-input
                v-model="formInline.activeName"
                placeholder="请输入活动名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="活动状态">
              <el-select
                v-model="formInline.status"
                clearable
                placeholder="请选择"
              >
                <el-option label="全部" value=""></el-option>
                <el-option label="启用" value="1"></el-option>
                <el-option label="停用" value="0"></el-option>
                <!-- <el-option label="已过期" value="2"></el-option>
                  <el-option label="已终止" value="3"></el-option> -->
              </el-select>
            </el-form-item>
            <el-form-item label="活动时间">
              <el-date-picker
                v-model="dataTime"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
            <div class="boxer">
              <el-button type="primary" @click="queryPayActiveLists"
                >搜索</el-button
              >
              <el-button @click="reset">重置</el-button>
            </div>
          </el-form>
        </div>
        <!-- <div class="buttons" v-if="jurisdiction == 0">
          <el-button type="primary" @click="activity(1)" class="elbtn"
            >添加活动</el-button
          >
        </div> -->
        <el-table
          :data="tableData"
          border
          :header-cell-style="{ background: '#F9FAFC', color: '#222' }"
          stripe
          :row-style="{height:'0px'}"
          :cell-style="{padding:'0px'}"
        >
          <el-table-column
            type="selection"
            
            min-width="40"
          ></el-table-column>

          <el-table-column
            prop="officeUid"
            
            min-width="250"
            label="机构ID"
            v-if="jurisdiction == 2"
          ></el-table-column>
          <el-table-column
            prop="officeName"
            
            min-width="200"
            label="机构名称"
            v-if="jurisdiction == 2"
          ></el-table-column>
          <el-table-column
            prop="phone"
            
            min-width="80"
            label="手机号"
            width="180"
            v-if="jurisdiction == 2"
          ></el-table-column>

          <el-table-column
            prop="activeName"
            
            min-width="80"
            label="活动名称"
            width="180"
          ></el-table-column>
          <el-table-column
            prop="channelName"
            
            min-width="200"
            label="品牌"
          ></el-table-column>
          <!-- <el-table-column
              prop="productNo"
              
              min-width="200"
              label="型号"
            ></el-table-column> -->
          <el-table-column  min-width="300" label="有效期">
            <template slot-scope="scope">
              {{ scope.row.beginDate }} - {{ scope.row.endDate }}
            </template>
          </el-table-column>
          <el-table-column
            prop="productNum"
            
            min-width="100"
            label="产品数量"
          ></el-table-column>
          <el-table-column
            prop="reachOpenNum"
            
            min-width="100"
            label="开通数量"
          ></el-table-column>
          <el-table-column
            prop="reachAmtNum"
            
            min-width="100"
            label="达标数量"
          ></el-table-column>
          <el-table-column  min-width="100" label="状态">
            <template slot-scope="scope">
              {{ isDuringDate(scope.row) }}
              <!-- <span v-if="scope.row.status == 0">未上线</span>
                <span v-if="scope.row.status == 1">已上线</span>
                <span v-if="scope.row.status == 2">已过期</span>
                <span v-if="scope.row.status == 3">已停用</span> -->
            </template>
          </el-table-column>
          <el-table-column  min-width="250" label="操作">
            <template slot-scope="scope">
              <!-- <el-button
                  type="primary"
                  @click="activity(3,scope.row.activeUid)"
                  size="mini"
                  v-if="jurisdiction==2"
                >规则</el-button> -->
              <el-button
                type="text"
                @click="activity(2, scope.row.activeUid)"
                size="mini"
                v-if="isAuth('standardEditor')"
                >编辑</el-button
              >
              <el-button
                type="text"
                @click="activeUidData(scope.row.activeUid)"
                size="mini"
                v-if="isAuth('standardDetails')"
                >详情</el-button
              >
              <el-button
                type="text"
                v-if="scope.row.status == 0 && isAuth('standardDisabled')"
                @click="changeStatus(scope.row.activeUid, 0)"
                size="mini"
                >启用</el-button
              >
              <el-button
                type="text"
                style="color:#F56C6C"
                v-if="scope.row.status != 0 && isAuth('standardDisabled')"
                @click="changeStatus(scope.row.activeUid, 1)"
                size="mini"
                >停用</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-button  @click="payActiveListExport" class="btnExport"
          >批量导出</el-button
        >
        <el-pagination
          background
          style="text-align: right;"
          class="pagination"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="formInline.page"
          :page-size="formInline.number"
          layout="total, sizes, prev, pager, next, jumper"
          :page-sizes="[10, 20, 30, 40, 50]"
          :total="totalNum"
        ></el-pagination>
      </div>
    </div>

    <!-- 查看详情弹框 -->
    <EventDetails
      style="z-index:999999999999999999999999"
      :eventShow="eventShow"
      :activeUid="activeUid"
      v-on="eventsuccess()"
    ></EventDetails>

    <!-- 添加编辑活动 -->
    <AddMachinesActivity
      style="z-index:999999999999999999999999999999"
      :machinesShow="machinesShow"
      :activeUid="activeUid"
      :activityType="activityType"
      v-on="machinesSuccess()"
    ></AddMachinesActivity>
  </div>
</template>
<script type="text/ecmascript-6">
import EventDetails from './eventDetails'
import AddMachinesActivity from './addMachinesActivity'
import bus from "../../assets/js/bus";
import https from "../../plugins/https.js";
import qs from 'qs'
export default {
  data() {
    return {
      formInline: {
        activeName: '',
        status: '',
        startDate: '',
        endDate: '',
        oemUid: localStorage.getItem('uid'),
        page: 1,
        number: 20
      },
      dataTime: [],
      eventShow: false,
      machinesShow: false,
      dialogVisible: false,
      totalNum: 0, //总页数
      form: {},
      tableData: [],
      activityType: 1,
      activeUid: '',
      jurisdiction :'',

    };
  },
  components: {
    EventDetails,
    AddMachinesActivity
  },
  mounted () {
    this.queryPayActiveList();
    this.jurisdiction = localStorage.getItem('jurisdiction')//判断当前用户 0-OEM  2-admin

  },
  methods: {

    // 重置
    reset() {
      this.formInline.officeName = "";
      this.formInline.phone = "";
      this.formInline.activeName = "";
      this.formInline.status = "";
      this.formInline.oEMName = "";
      this.formInline.startDate = "";
      this.formInline.endDate = "";
      this.formInline.officeUid = "";
      this.mechanism = "";
      this.dataTime = [];
    },
    activeUidData (id) {
      this.eventShow = true
      this.activeUid = id
    },
    changeStatus (id, n) {
      console.log(222, id)
      if (n === 1) {
        this.$confirm('停止活动后奖励将不再计算，操作立即生效, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          // type: 'warning'
        }).then(() => {
          this.changeStatusInterface(id,n)
        })
      } else {
        this.changeStatusInterface(id,n)
      }
    },
    changeStatusInterface (id, n) {
      console.log(n)
      if(n==0){
        n=1
      }else{
        n=0
      }
      this.listLoading = true
      let parme = {
        uid: id,
        status: n
      }
      https.changeActiveStatus(parme).then(res => {
        if (res.data.code !== '0000') {
          this.$notify({title: "错误",message: res.data.msg,type: "error"});
          this.listLoading = false
          return
        }
        this.queryPayActiveList()
        this.$notify({title: "成功",message: res.data.msg,type: "success"});
        this.listLoading = false
      })
    },
    queryPayActiveList () {
      if (this.fromType == true) return
      this.fromType = true
      this.listLoading = true
      if (this.dataTime === null) this.dataTime = []
      this.formInline.startDate = this.dataTime[0]
      this.formInline.endDate = this.dataTime[1]
      https.queryPayActiveList(this.formInline).then(res => {
        if (res.data.code !== '0000') {
          this.$notify({title: "错误",message: res.data.msg,type: "error"});
          this.listLoading = false
          this.fromType = false
          return
        }
        this.tableData = res.data.data
        this.totalNum = res.data.total
        this.fromType = false
        this.listLoading = false
      })
    },
    isDuringDate(beginDateStr) {
      var curDate = new Date(),
          beginDate = new Date(beginDateStr.beginDate),
          endDate = new Date(beginDateStr.endDate);
      if (curDate >= beginDate && curDate <= endDate) {
          return "进行中";
      }else if(curDate<beginDate){
        return "未开始"
      }else if(curDate>endDate){
        return "已结束";
      }
    },
    payActiveListExport() {
      // window.location.href =  `api/active/payActiveList/excel/export?${qs.stringify(this.formInline)}`;
      let that = this;
        that.axios({
          url:  'api/active/payActiveList/excel/export',
          method: 'POST',
          headers: {'Content-Type': 'application/json;charset=utf-8'},
          data: that.formInline,
          responseType: 'arraybuffer'
        }).then(res => {
          let blob = new Blob([res.data], {type: "application/vnd.ms-excel;charset=utf-8"});
          var link = document.createElement('a');
          link.href = window.URL.createObjectURL(blob);
          let date = new Date();
          link.download = "开通达标列表" + date.getFullYear() + (date.getMonth() < 10 ? '0' + date.getMonth() : date.getMonth()) + (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
          link.click();
        }).catch((e) => {
          that.$notify({
            title: "错误",
            message: "导出失败",
            type: "error"
          });
        })
    },
    onAdd() {},
    handleSizeChange(val) {
      this.formInline.number = val; //动态改变
      this.formInline.page = 1;
      this.queryPayActiveList()
    },
    queryPayActiveLists(){
      this.formInline.page = 1; //动态改变
      this.queryPayActiveList()
    },
    handleCurrentChange(val) {
      this.formInline.page = val; //动态改变
      this.queryPayActiveList()
    },
    auditShop() {},
    eventsuccess() {
      bus.$on("eventsuccess", res => {
        this.eventShow = res;
      });
    },
    activity (type, id) {
      this.activeUid = id
      this.activityType = type
      this.machinesShow = true
    },
    machinesSuccess () {
      bus.$on("machinesSuccess", res => {
        this.machinesShow = res.show;
        if (res.type == 1) {
          this.queryPayActiveList()
        }
      });
    }
  }
};
</script>
<style scoped>
.con {
  position: relative;
}
.elbtn {
  margin-left: 90%;
}
.img {
  display: block;
  width: 100%;
}
.money p {
  width: 100%;
  line-height: 30px;
}
.status {
  font-size: 14px;
  margin-bottom: 20px;
}
.color {
  color: #e6a23c;
}
.mt20 {
  margin-top: 20px;
}
.shopList {
  width: 100%;
  border-bottom: 1px solid #ccc;
  line-height: 80px;
  font-size: 16px;
}
.formItem {
  float: left;
}
.pagination {
  margin-top: 10px;
}
.btnExport {
  margin-left: 20px;
  color:#409EFF;
  float: left;
  margin-top: 10px;
  margin-bottom: 10px;
}
.btn {
  margin-left: 20px;
  /* float: right; */
}
.contbox6_10 {
  width: 100%;
  /* margin-left: 2%; */
  /*  height: 87.5vh; */
  overflow-x: auto;
  box-sizing: border-box;
  float: left;
}

.el-form--inline .el-form-item {
  margin-right: 0;
}
</style>
